import styles from './index.module.less'
import Pagination from '@/components/pagination'
import Table from '@/components/table'
import columns from './column'
import { useNavigate } from 'react-router-dom'
import { getUserAsset, getUserAssetList } from '@/api/user'
import { useEffect } from 'react'
import { useSetState } from 'ahooks'
import Big from 'big.js'

const Index = () => {
  const navigate = useNavigate()
  const [pageData, setPageData] = useSetState({
    asset: 0,
    page: 1,
    pageSize: 30,
    list: null,
    total: 0,
  })

  // 获取资产
  const fetchAsset = async () => {
    const res = await getUserAsset()
    if (!res.code) {
      setPageData({
        asset: Big(res.data.accountBalance || 0)
          .div(100)
          .toFixed(2)
          .toString(),
      })
    }
  }

  //获取资产列表
  const fetchAssetList = async (params) => {
    const res = await getUserAssetList(params)
    if (!res.code) {
      setPageData({
        list: res.data?.list || [],
        total: res.data?.total || 0,
      })
    }
  }
  useEffect(() => {
    fetchAsset()
  }, [])

  useEffect(() => {
    fetchAssetList({ page: pageData.page, pageSize: pageData.pageSize })
  }, [pageData.page])
  return (
    <div className={styles.home}>
      <p className={styles.titleLabel}>账号资产</p>
      <div className={styles.statisticItem}>
        <div className={styles.itemInfo}>
          <span className={styles.info}>账户余额</span>
          <div className={styles.money}>
            <span className={styles.unit}>￥</span>
            <span>{pageData.asset}</span>
          </div>
        </div>
        <div className={styles.withdrawal} onClick={() => navigate('/withdrawal')}>
          提现
        </div>
      </div>
      <p className={styles.titleLabel}>交易记录</p>
      <Table
        rowKeyName="orderId"
        className={styles.tableMainContent}
        columns={columns()}
        dataSource={pageData.list}
        height={100}
        nullText="暂无交易记录"
      />
      {pageData.total > 30 && (
        <Pagination total={pageData.total} onChange={(page) => setPageData({ page })} className="mt-7" />
      )}
    </div>
  )
}

export default Index
